<template>
  <div v-loading="formloading" class="gl_contentBox gl_heightFull">
    <!-- 头像信息 -->
    <div class="info">
      <div>
        <img class="img" :src="getStaticFileUrl(datainfo.imagePath)" alt="">
      </div>
      <div>
        <p class="info_name">
          <span>
            {{ datainfo.name }}
          </span>
          <span v-if="datainfo.genderCode">
            {{ datainfo.genderCode === 'M'?'男':'女' }}
          </span>
        </p>
        <div class="info_number">
          <p>
            <span>证件号码</span>
            <span>{{ datainfo.idCardNumber }}</span>
          </p>
          <p v-if="datainfo.idCardTypeCode ===&quot;IdCard&quot;" style="margin-left:74px">
            <span>生日</span>
            <span>{{ datainfo.idCardNumber.slice(6, 10) + '-' + datainfo.idCardNumber.slice(10, 12) + '-' + datainfo.idCardNumber.slice(12, 14) }}</span>
          </p>
        </div>
        <div class="info_number">
          <p>
            <span>电话号码</span>
            <span>{{ datainfo.phoneNumber }}</span>
          </p>
        </div>
        <div class="info_number">
          <p>
            <span>地址</span>
            <span>{{ datainfo.address }}</span>
          </p>
        </div>
      </div>
    </div>
    <!-- 销售信息 -->
    <el-divider class="header" content-position="left">销售信息</el-divider>
    <div>
      <div class="sales">
        <p style="width:301px">
          <span>来源渠道</span>
          <span v-if="datainfo.customerSource">{{ datainfo.customerSource.name }}</span>
        </p>
        <p>
          <span>意向度</span>
          <span v-if="datainfo.intentionDegreeCode==='Low'">{{ '低' }}</span>
          <span v-if="datainfo.intentionDegreeCode==='Medium'">{{ '中' }}</span>
          <span v-if="datainfo.intentionDegreeCode==='High'">{{ '高' }}</span>

        </p>
      </div>
      <div>
        <el-row>
          <el-col :span="12">
            <div class="sales">
              <p style="width:301px">
                <span>标签</span>
                <span v-if="datainfo.customerTag">{{ datainfo.customerTag.name }}</span>
              </p>
              <p>
                <span>跟进人</span>
                <span v-if="datainfo.followUpEmployee">{{ datainfo.followUpEmployee.name }}</span>
              </p>
            </div>
          </el-col>
          <el-col :span="9">
            <div style="float:right">
              <span class="follow">跟进状态</span>
              <el-select v-model="Api_POST_ClubCustomerFollowUpCustomerIdQO.followUpStatusCode" size="mini">
                <el-option v-for="(item,index) in followUpStatus" :key="index" :label="item.value" :value="item.code" />
              </el-select>
              <el-button style="margin-left:20px" size="mini" :loading="butloaging" type="primary" @click="addfollowUp()">
                确定
              </el-button>
            </div>

          </el-col>

        </el-row>

      </div>
    </div>
    <!-- 修改动态 -->
    <el-divider class="header" content-position="left">修改动态</el-divider>
    <div v-for="(item,index) in record" :key="index" class="alter">
      <p>
        <span v-if="item.creationTime">{{ item.creationTime | FormatDate('yyyy-MM-dd') }}</span> <span v-if="item.creationTime" style="margin-left:10px">{{ item.creationTime | FormatDate('HH:mm') }}</span>
      </p>
      <p>
        <span v-if="item.customeModificationRecordType"> {{ item.name }} {{ '将该用户' + item.customeModificationRecordType.name }}</span>
      </p>
    </div>
    <!-- 沟通动态 -->
    <el-divider class="header" content-position="left">沟通动态</el-divider>
    <el-form :model="CreateCustomerConversationRecordInput">
      <el-row>
        <el-col :span="12">
          <el-form-item label="添加沟通记录" style="margin-bottom:0px" required="" />
        </el-col>
        <el-col :span="9">
          <div style="float:right">
            <el-button type="text" icon="iconfont icon_a-bianji" @click="tokehistory()" /><span class="toke" @click="tokehistory()">沟通记录</span>
          </div>
        </el-col>
      </el-row>
      <el-input
        v-model="CreateCustomerConversationRecordInput.description"
        type="textarea"
        :rows="6"
        maxlength="100"
        placeholder="请输入内容"
        style="width:88%"
      />
      <el-row style="margin-top:18px">
        <el-col :span="4">
          <el-form-item label="沟通类型" required="">
            <el-select v-model="CreateCustomerConversationRecordInput.conversationTypeCode" size="mini">
              <el-option v-for="(item,index) in dict.conversationType" :key="index" :label="item.value" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="下次跟进时间" required="">
            <el-date-picker
              v-model="CreateCustomerConversationRecordInput.nextConversationTime"
              size="mini"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="margin-top:35px">
      <el-row>
        <el-col :span="24" align="center">
          <el-button type="primary" size="mini" :loading="converload" @click="reset()">返回</el-button>
          <el-button type="primary" size="mini" :loading="converload" @click="conver()">保存</el-button>
          <el-button type="primary" size="mini" @click="gosign()">报名</el-button>
          <el-button type="primary" size="mini" @click="gotimetable()">办理试课</el-button>
          <el-button type="warning" size="mini" :loading="deleteconverload" @click="deletePeople()">退回客户池</el-button>
        </el-col>
      </el-row>
    </div>
    <tokehistory ref="tokehistory" />
  </div>
</template>

<script>

import tokehistory from './tokehistory/tokehistory';
import { mapState, mapActions } from 'vuex';
import { Api_GET_ClubCustomerIdQO, Api_GET_ClubCustomerModificationRecordQO, Api_POST_ClubCustomerFollowUpCustomerIdQO, CreateCustomerConversationRecordInput } from '@/lib/form/hall/swaggerForm';
import { api_GET_ClubCustomerId, api_GET_ClubCustomerModificationRecord, api_POST_ClubCustomerFollowUpCustomerId, api_POST_ClubCustomerConversationRecord, api_POST_ClubCustomerRecycleCustomerId } from '@/extend/api/hallswaggerApi/app';
export default {
  components: { tokehistory },

  data() {
    return {
      followUpStatus: [{ code: 'BeFollowingUp', value: '跟进中' }, { code: 'Subscribe', value: '已邀约' }, { code: 'TrialLesson', value: '已试课' }, { code: 'Traded', value: '已成交' }, { code: 'Invalid', value: '无效' }],
      deleteconverload: false,
      butloaging: false,
      converload: false,
      CreateCustomerConversationRecordInput: new CreateCustomerConversationRecordInput(), // 创建沟通
      Api_POST_ClubCustomerFollowUpCustomerIdQO: new Api_POST_ClubCustomerFollowUpCustomerIdQO(),
      Api_GET_ClubCustomerModificationRecordQO: new Api_GET_ClubCustomerModificationRecordQO(),
      Api_GET_ClubCustomerIdQO: new Api_GET_ClubCustomerIdQO(),
      datainfo: {},
      record: [],
      formloading: false
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      cache: state => state.dict.cache
    })
  },
  created() {
    // this.followUpStatus = this.dict.followUpStatus.splice(1, 1);

    this.getDict();
    this.getDictByType(['district']);
    this.$nextTick(res => {
      this.getInfo();
      this.getRecord();
    });
    // if (this.dict.followUpStatus) {
    //   this.followUpStatus = JSON.parse(JSON.stringify(this.dict.followUpStatus));
    // }

    // console.log(this.followUpStatus.splice(0, 1));
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    getInfo() {
      this.Api_GET_ClubCustomerIdQO.IsCustomerPool = '';
      this.Api_GET_ClubCustomerIdQO.IncludeCustomerSource = true;
      this.Api_GET_ClubCustomerIdQO.IncludeCustomerTag = true;
      this.Api_GET_ClubCustomerIdQO.IncludeFollowUpEmployee = true;
      this.formloading = true;
      api_GET_ClubCustomerId(this.$route.query.id, this.Api_GET_ClubCustomerIdQO).then(res => {
        console.log(res);
        this.formloading = false;
        this.datainfo = res;
        this.Api_POST_ClubCustomerFollowUpCustomerIdQO.followUpStatusCode = res.followUpStatusCode;
      }, error => {
        this.formloading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    getRecord() {
      this.Api_GET_ClubCustomerModificationRecordQO.CustomerId = this.$route.query.id;
      this.Api_GET_ClubCustomerModificationRecordQO.IncludeCustomeModificationRecordType = true;
      api_GET_ClubCustomerModificationRecord(this.Api_GET_ClubCustomerModificationRecordQO).then(res => {
        console.log(res);
        this.record = res.items;
      });
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (relativeUrl) {
        return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
      } else {
        return require('@/assets/images/face_default.png');
      }
    },
    // 退回客户池
    deletePeople() {
      this.deleteconverload = true;
      api_POST_ClubCustomerRecycleCustomerId(this.$route.query.id).then(res => {
        this.deleteconverload = false;
        this.$message({ type: 'success', message: '回退成功' });
        this.$router.go(-1);
      }, error => {
        this.deleteconverload = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 返回
    reset() {
      this.$router.push({
        name: 'Crm'
      });
    },
    // 处理省市区
    // addressDataForCheck (_provinceCode, _cityCode, _countyCode) {
    //   let _provinceData;
    //   let _cityData;
    //   let _countyData;
    //   if (_provinceCode && this.cache.district) {
    //     _provinceData = this.cache.district.find(item => item.code === _provinceCode);
    //   }
    //   if (_cityCode && _provinceData) {
    //     _cityData = _provinceData.children.find(item => item.code === _cityCode);
    //   }
    //   if (_countyCode && _cityData) {
    //     _countyData = _cityData.children.find(item => item.code === _countyCode);
    //   }
    //   _provinceData = _provinceData ? _provinceData.name : '';
    //   _cityData = _cityData ? _cityData.name : '';
    //   _countyData = _countyData ? _countyData.name : '';
    //   return `${_provinceData} ${_cityData} ${_countyData}`;
    // },
    // 修改跟进状态
    addfollowUp() {
      this.butloaging = true;
      api_POST_ClubCustomerFollowUpCustomerId(this.$route.query.id, this.Api_POST_ClubCustomerFollowUpCustomerIdQO).then(res => {
        console.log(res);
        this.$message({ type: 'success', message: '修改成功' });
        this.butloaging = false;
        this.getInfo();
        this.getRecord();
      }, error => {
        this.butloaging = false;
        this.getInfo();
        this.getRecord();
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 创建沟通记录
    conver() {
      this.converload = true;
      this.CreateCustomerConversationRecordInput.customerId = this.$route.query.id;
      if (this.CreateCustomerConversationRecordInput.conversationTypeCode === null) {
        this.$message({ type: 'error', message: '选择沟通类型' });
        this.converload = false;
        return;
      }
      if (this.CreateCustomerConversationRecordInput.nextConversationTime === null) {
        this.$message({ type: 'error', message: '选择下次沟通时间' });
        this.converload = false;
        return;
      }
      if (this.CreateCustomerConversationRecordInput.description === null || this.CreateCustomerConversationRecordInput.description === '') {
        this.$message({ type: 'error', message: '输入沟通内容' });
        this.converload = false;
        return;
      }
      api_POST_ClubCustomerConversationRecord(this.CreateCustomerConversationRecordInput).then(res => {
        this.$message({ type: 'success', message: '创建成功' });
        this.$router.go(-1);
        this.converload = false;
      }, error => {
        this.converload = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 报名
    gosign() {
      this.$router.push({
        name: 'Renewal',
        query: {
          add: 'true',
          studentId: this.$route.query.id,
          studentName: this.datainfo.name,
          idCardTypeCode: this.datainfo.idCardTypeCode,
          idCardNumber: this.datainfo.idCardNumber
        }
      });
      // this.$router.push({ name: 'Renewal', params: { studentId: this.$route.query.id, studentName: this.datainfo.name }});
    },
    // 打开沟通记录弹窗
    tokehistory() {
      this.$refs.tokehistory.gethistory();
      this.$refs.tokehistory.dialogTimeVisible = true;
    },
    gotimetable() {
      this.$router.push({ name: 'Trialclass', query: { studentId: this.$route.query.id }});
    }
  }

};
</script>

<style lang="scss" scoped>
.info {
  display: flex;
      .img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin-right: 61px;
    }
    .info_name{
      font-size: 20px;
      font-weight: 400;
      color: #303133;
    }
    .info_name span:nth-of-type(2){
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
      color: #A6A6A6;
      margin-left: 13px;
    }
    .info_number {
      display: flex;
      margin-top: 5px;
    }
    .info_number span:nth-of-type(1) {
      font-weight: 400;
      font-size: 16px;
      color: #7F7F7F;
    }
    .info_number span:nth-of-type(2) {
      font-weight: 400;
      font-size: 14px;
      margin-left: 10px;
      color: #353434;
    }
}
.header{
font-weight: 500;
font-size: 16px;
color: #353434;
}
.sales {
  display: flex;
  align-items: center;
}
.sales span:nth-of-type(1) {
font-weight: 400;
font-size: 16px;
color: #7F7F7F;
}
.sales span:nth-of-type(2) {
  display: inline-block;
  width: 227px;
font-weight: 400;
font-size: 13px;
color: #353434;
margin-left: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 16px;
line-height: 22px;
}
.follow {
  font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #353434;
margin-right: 11px;
}
.alter {
  display: flex;
  align-items: center;
}
.alter p:nth-of-type(1) {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #353434;
}
.alter p:nth-of-type(2) {
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: #353434;
margin-left: 40px;
}
.toke {
cursor: pointer;
font-weight: 400;
font-size: 16px;
color: #1890ff;
margin-left: 10px;
}
</style>
